<template>
  <div class="login-wrapper">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="container"
    >
      <el-form-item label="账号" prop="name">
        <el-input v-model="ruleForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="ruleForm.password"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          class="btn-group"
          plain
          type="primary"
          @click="submitForm(ruleFormRef)"
        >
          登 陆
        </el-button>
        <!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
      </el-form-item>
    </el-form>
    <div class="background">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>

<script lang="jsx" setup>
import { reactive, ref } from "vue"
import { userLogin } from "@/api/login"
import { encryption } from "@/utils/crypto"
import { useSystemStore } from "@/stores"
import { ElMessage } from "element-plus"
import { useRouter } from "vue-router"
import { delayFn } from "@/utils"

const router = useRouter()
const systemStore = useSystemStore()

const ruleFormRef = ref()
const validateFn = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入"))
  } else {
    callback()
  }
}
const ruleForm = reactive({
  name: "",
  password: "",
})
const rules = reactive({
  name: [{ validator: validateFn }],
  password: [{ validator: validateFn }],
})
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate(async valid => {
    if (valid) {
      const userinfo = await userLogin({
        ...ruleForm,
        password: encryption(ruleForm.password),
      })
      await systemStore.setUserInfo(userinfo)
      await systemStore.setToken(userinfo?.token)
      await systemStore.loadCurrentUserMenuList()
      // 没有系统权限直接拦截
      const currentUserMenu = systemStore.currentUserMenuList
      if (currentUserMenu.length === 0) {
        ElMessage.error("暂无系统权限, 请联系管理员添加!")
        await systemStore.clearAll()
        return
      } else {
        await systemStore.loadDictData()
        ElMessage.success("登陆成功")
        await delayFn(100)
        router.push({ path: "/system" })
      }
    } else {
      console.log("error submit!")
    }
  })
}
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scoped lang="less">
.login-wrapper {
  width: 100vw;
  height: 100vh;
  background: #50a3a2;
  // background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100vh;);
  position: relative;

  .container {
    width: 400px;
    border-radius: 12px;
    // border: 2px solid #e8e8e8;
    box-shadow: 0 0 20px #e6e6e6;
    padding: 32px 32px 12px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
  }

  .btn-group {
    width: 100%;
  }
}

.background span {
  width: 20vmin;
  height: 20vmin;
  border-radius: 20vmin;
  backface-visibility: hidden;
  position: absolute;
  animation-name: move;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.background span:nth-child(1) {
  color: #583c87;
  top: 47%;
  left: 10%;
  animation-duration: 10.5s;
  animation-delay: -12.6s;
  transform-origin: 0vw -9vh;
  box-shadow: -40vmin 0 11.2034042917vmin currentColor;
}

.background span:nth-child(2) {
  color: #e45a84;
  top: 33%;
  left: 45%;
  animation-duration: 13.2s;
  animation-delay: -15.6s;
  transform-origin: 14vw 17vh;
  box-shadow: 40vmin 0 10.2115006212vmin currentColor;
}

.background span:nth-child(3) {
  color: #e45a84;
  top: 90%;
  left: 55%;
  animation-duration: 14.8s;
  animation-delay: -3.5s;
  transform-origin: -18vw 9vh;
  box-shadow: -40vmin 0 12.3544421218vmin currentColor;
}

.background span:nth-child(4) {
  color: #e45a84;
  top: 7%;
  left: 88%;
  animation-duration: 15.4s;
  animation-delay: -2.6s;
  transform-origin: 21vw 14vh;
  box-shadow: -40vmin 0 5.9226682716vmin currentColor;
}

.background span:nth-child(5) {
  color: #583c87;
  top: 65%;
  left: 26%;
  animation-duration: 15.3s;
  animation-delay: -6s;
  transform-origin: 9vw -23vh;
  box-shadow: 40vmin 0 5.4289289226vmin currentColor;
}

.background span:nth-child(6) {
  color: #e45a84;
  top: 45%;
  left: 30%;
  animation-duration: 11.2s;
  animation-delay: -6.6s;
  transform-origin: -3vw 23vh;
  box-shadow: -40vmin 0 14.4480182393vmin currentColor;
}

.background span:nth-child(7) {
  color: #583c87;
  top: 40%;
  left: 95%;
  animation-duration: 10.3s;
  animation-delay: -6.6s;
  transform-origin: 6vw 1vh;
  box-shadow: -40vmin 0 5.2476920034vmin currentColor;
}

.background span:nth-child(8) {
  color: #583c87;
  top: 84%;
  left: 91%;
  animation-duration: 15.6s;
  animation-delay: -15.3s;
  transform-origin: 15vw 20vh;
  box-shadow: 40vmin 0 5.328532637vmin currentColor;
}

.background span:nth-child(9) {
  color: #ffacac;
  top: 88%;
  left: 49%;
  animation-duration: 12.5s;
  animation-delay: -6.3s;
  transform-origin: -23vw 17vh;
  box-shadow: -40vmin 0 13.7564470826vmin currentColor;
}

.background span:nth-child(10) {
  color: #ffacac;
  top: 4%;
  left: 16%;
  animation-duration: 11.9s;
  animation-delay: -10.2s;
  transform-origin: -4vw 13vh;
  box-shadow: 40vmin 0 13.95746731vmin currentColor;
}

.background span:nth-child(11) {
  color: #583c87;
  top: 16%;
  left: 99%;
  animation-duration: 10.4s;
  animation-delay: -9s;
  transform-origin: -3vw -5vh;
  box-shadow: -40vmin 0 11.6603526433vmin currentColor;
}

.background span:nth-child(12) {
  color: #ffacac;
  top: 46%;
  left: 81%;
  animation-duration: 11.4s;
  animation-delay: -9.2s;
  transform-origin: 3vw -1vh;
  box-shadow: -40vmin 0 14.0594399762vmin currentColor;
}

.background span:nth-child(13) {
  color: #e45a84;
  top: 69%;
  left: 75%;
  animation-duration: 12.3s;
  animation-delay: -7.7s;
  transform-origin: 13vw -4vh;
  box-shadow: -40vmin 0 14.688619748vmin currentColor;
}

.background span:nth-child(14) {
  color: #ffacac;
  top: 67%;
  left: 52%;
  animation-duration: 12.3s;
  animation-delay: -1.2s;
  transform-origin: 23vw -5vh;
  box-shadow: -40vmin 0 13.6204973407vmin currentColor;
}

.background span:nth-child(15) {
  color: #e45a84;
  top: 38%;
  left: 57%;
  animation-duration: 12.4s;
  animation-delay: -8.2s;
  transform-origin: 11vw 19vh;
  box-shadow: 40vmin 0 13.6934527314vmin currentColor;
}

.background span:nth-child(16) {
  color: #ffacac;
  top: 78%;
  left: 94%;
  animation-duration: 13.4s;
  animation-delay: -13.2s;
  transform-origin: -19vw 8vh;
  box-shadow: -40vmin 0 8.3807133847vmin currentColor;
}

.background span:nth-child(17) {
  color: #e45a84;
  top: 57%;
  left: 38%;
  animation-duration: 15.5s;
  animation-delay: -12.1s;
  transform-origin: -21vw -20vh;
  box-shadow: -40vmin 0 10.8162910663vmin currentColor;
}

.background span:nth-child(18) {
  color: #ffacac;
  top: 65%;
  left: 45%;
  animation-duration: 11.2s;
  animation-delay: -2.6s;
  transform-origin: 0vw -22vh;
  box-shadow: -40vmin 0 8.9038134634vmin currentColor;
}

.background span:nth-child(19) {
  color: #ffacac;
  top: 18%;
  left: 39%;
  animation-duration: 11.7s;
  animation-delay: -15.9s;
  transform-origin: -24vw 11vh;
  box-shadow: 40vmin 0 7.2048026951vmin currentColor;
}

.background span:nth-child(20) {
  color: #ffacac;
  top: 87%;
  left: 15%;
  animation-duration: 11.1s;
  animation-delay: -6.2s;
  transform-origin: -9vw -24vh;
  box-shadow: -40vmin 0 12.9500645493vmin currentColor;
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}
</style>
